<template>
  <div class="index-wrapper">
    <div :class="menuCollapse ? 'menu-wrapper collapseClass' : 'menu-wrapper'">
      <div class="logo-wrapper">
        <div class="menu-logo">
          <img src="../assets/icon/logo.jpg" alt width="28" height="28" />
          <span>Easy Life</span>
        </div>
        <div class="sysName" v-show="!menuCollapse ">
          <span class="sysName-content">运营端</span>
          <div class="sysName-line"></div>
        </div>
      </div>
      <div class="scroll-wrapper">
        <el-menu
          :default-active="currentMenu"
          class="el-menu-vertical-demo"
          router
          :collapse="menuCollapse"
          unique-opened
        >
          <transition name="fade">
            <div v-show="show">
              <el-submenu
                v-for="(menu,preindex) in menusListSecond"
                :index="`${preindex}`"
                :key="preindex"
              >
                <template slot="title">
                  <img src="../assets/icon/popups.png" width="16" height="16" class="icon" alt />
                  <span>{{menu.title}}</span>
                </template>

                <template v-for="(child,idx) in menu.children">
                  <template v-if="child.children">
                    <el-submenu
                      :index="child.url ? child.url: preindex+'-'+idx"
                      :key="child.url ? child.url: preindex+'-'+idx"
                    >
                      <template slot="title">{{ child.title }}</template>
                      <el-menu-item
                        v-for="(threeItem,i) in child.children"
                        :key="i"
                        :index="threeItem.url"
                      >{{ threeItem.title }}</el-menu-item>
                    </el-submenu>
                  </template>
                  <template v-else>
                    <el-menu-item
                      :key="child.url"
                      @click="checkhander(child.url)"
                      :index="child.url"
                    >{{child.title}}</el-menu-item>
                  </template>
                </template>
              </el-submenu>
            </div>
          </transition>
        </el-menu>
      </div>
    </div>
    <div :class="menuCollapse ? 'main-content collapseClass' : 'main-content'">
      <div class="header">
        <span class="switch" @click="menuSwitchHandle">
          <img src="../assets/icon/zhedie.png" alt width="16" height="16" />
        </span>

        <div class="menus-one">
          <el-tabs v-model="menuIndex" @tab-click="oneMenuHandleSelect">
            <el-tab-pane name="0" label="首页"></el-tab-pane>
            <el-tab-pane
              v-for="(menu) in menuList"
              :name="menu.index"
              :key="menu.index"
              :label="menu.title"
            ></el-tab-pane>
          </el-tabs>
          <!-- <el-menu
            class
            mode="horizontal"
            :default-active="menuIndex"
            @select="oneMenuHandleSelect"
          >
            <el-menu-item index="0">首页</el-menu-item>
            <el-menu-item
              v-for="(menu) in menuList"
              :index="menu.index"
              :key="menu.index"
            >{{menu.title}}</el-menu-item>
          </el-menu>-->
        </div>
        <el-dropdown class="header-btn" @command="handleCommand">
          <span>
            {{userName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <Tags></Tags>
      <div class="main-wrapper">
        <keep-alive :include="tagsList">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
import BetterScroll from "better-scroll";
import Tags from "./common/tags/Tags";
export default {
  components: { Tags },
  data() {
    return {
      show: false,
      tagsList: [],
      currentMenu: this.$route.path,
      menuCollapse: true,
      userName: "",
      menuList: [],
      menusListSecond: [],
      menuIndex: "0",
      pathToGrandId: {}
      // {index: '1', img:'popups.png', title: '配置管理', children: [{url:'/indexPopupManage', title: '首页弹窗管理'}]},
    };
  },
  created() {
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    this.$bus.$on("tags", msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
    this.highlight();
    if (localStorage.getItem("cmsUser")) {
      // 每次刷新页面判断判断状态已登录不做处理
      const temp = JSON.parse(localStorage.getItem("cmsUser")).menu;
      this.menuList = JSON.parse(temp);
      this.routerForeach(this.menuList);
      this.$nextTick(() => {
        let scroll = new BetterScroll(".scroll-wrapper", {
          scrollbar: { fade: false },
          mouseWheel: true
        });
      });
      this.userName = JSON.parse(localStorage.getItem("cmsUser")).name;
    } else {
      // 未登录重新登录
      this.$router.push({ path: "/login" });
    }
    this.renderMenusSecond(this.$route.path);
    this.menuCollapse = this.$route.path === "/fakeHomePage";
  },
  watch: {
    "$route.path"(path) {
      this.currentMenu = this.$route.path;
      this.menuCollapse = path === "/fakeHomePage";
      this.renderMenusSecond(path);
    },
    menuIndex(idx) {
      this.menuCollapse = idx == 0;
    }
  },
  methods: {
    renderMenusSecond(path) {
      let thisMenuOneId = this.pathToGrandId[path];
      if (thisMenuOneId && thisMenuOneId != this.menuIndex) {
        this.menuIndex = thisMenuOneId;
        let thisMenuList = this.menuList.filter(
          item => item.index === thisMenuOneId
        );
        this.menusListSecond = thisMenuList.length
          ? thisMenuList[0].children
          : [];
        this.show = true;
      }
      if (path == "/fakeHomePage") {
        this.menuIndex = "0";
        this.menusListSecond = [];
      }
    },
    routerForeach(lists, prevIndex) {
      lists.forEach(({ url, index, children }) => {
        prevIndex = index || prevIndex;
        if (url) this.pathToGrandId[url] = prevIndex;
        if (children && children.length) {
          this.routerForeach(children, prevIndex);
        }
      });
    },
    oneMenuHandleSelect(tab) {
      let key = tab.name;
      if (key == 0) {
        this.$router.push({ path: "/fakeHomePage" });
      }
      this.menusListSecond = [];
      this.show = false;
      setTimeout(() => {
        this.show = true;
        let thisMenuList = this.menuList.filter(item => item.index === key);
        this.menusListSecond = thisMenuList.length
          ? thisMenuList[0].children
          : [];
      }, 100);
    },
    checkhander(val) {
      if (val == "/HrNotice") {
        this.$bus.$emit("showpanel", "show");
      }
    },
    menuSwitchHandle() {
      this.menuCollapse = !this.menuCollapse;
      this.highlight();
    },
    // 二级页面菜单高亮
    highlight() {
      this.currentMenu = this.$route.path;
      if (this.$route.path === "/indexPopupOperateDetail") {
        this.currentMenu = "/indexPopupManage";
      }
    },
    handleCommand(command) {
      if (command === "logout") {
        localStorage.clear();
        sessionStorage.removeItem('tagsList')
        this.$router.push({ path: "/login" });
      }
    }
  }
};
</script>
<style lang="stylus">
.customAni {
  transition: all 300ms ease-in-out;
}

.index-wrapper {
  position: relative;
  height: 100%;

  /* 左侧菜单 */
  .menu-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    @extend .customAni;

    &:after {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      content: ' ';
      width: 8px;
      background: linear-gradient(to right, #dfe5f3, #f6f6fb);
    }

    &.collapseClass {
      width: 64px;

      .menu-logo {
        span {
          opacity: 0;
        }
      }

      .scroll-wrapper {
        width: 64px;
        @extend .customAni;
      }

      .el-menu {
        span {
          opacity: 0;
        }
      }
    }

    /* logo区域 */
    .logo-wrapper {
      margin-top: 25px;
      text-align: center;

      .menu-logo {
        height: 28px;

        img {
          vertical-align: top;
          margin-right: 12px;
        }

        span {
          font-size: 22px;
          line-height: 28px;
        }
      }

      .sysName {
        margin: 16px auto 20px;
        width: 104px;
        height: 17px;
        position: relative;

        .sysName-content {
          display: inline-block;
          background: #fff;
          width: 56px;
          height: 17px;
          line-height: 17px;
        }

        .sysName-line {
          position: absolute;
          width: 100%;
          top: 9px;
          z-index: -1;
          border-bottom: 1px solid #BFC5D1;
        }
      }
    }

    .scroll-wrapper {
      position: absolute;
      bottom: 0;
      top: 86px;
      width: 200px;
      overflow: hidden;

      .bscroll-vertical-scrollbar {
        z-index: 90 !important;
      }

      .el-menu {
        border-right: none;

        .icon {
          margin-right: 4px;
        }
      }
    }
  }

  /* 右侧内容 */
  .main-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px;
    background: #f7f7fb;
    @extend .customAni;

    &.collapseClass {
      left: 64px;
    }

    .header {
      height: 50px;
      padding-right: 20px;
      position: relative;
      background: #fff;

      .switch {
        position: absolute;
        height: 50px;
        width: 50px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        i {
          line-height: 50px;
        }

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }

      .header-btn {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        cursor: pointer;
      }
    }

    .main-wrapper {
      margin: 25px 25px 0 15px;
      position: absolute;
      top: 80px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-y: auto;

      &>div {
        padding: 25px;
        background: #fff;
      }
    }
  }

  .menus-one {
    position: absolute;
    left: 50px;
    right: 150px;

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__nav-wrap::after {
      background: none;
    }

    .el-tabs__item {
      color: #666;
      font-size: 15px;
      height: 48px;
      line-height: 48px;

      &.is-active {
        color: #409EFF;
      }
    }

    .el-tabs__active-bar {
      height: 4px;
    }

    .el-tabs__nav-next, .el-tabs__nav-prev {
      line-height: 50px;
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
}
</style>
